<template>
	<view class="card-wrapper">
		<up-card class="task-card" v-for="item in props.cards" 
		:key="item.id"
		@body-click="handlerBody(item)">
			<!-- 卡片头部 -->
			<template #head>
				<view class="card-head">
					<!-- 头像 -->
					<view class="card-head-avatar">
						<up-avatar 
							:src="item.avatar" 
							size="70rpx" 
							shape="circle"
						></up-avatar>
					</view>
					
					<!-- 头部信息区 -->
					<view class="card-head-message">
						<!-- 上部：用户信息+状态 -->
						<view class="card-head-message-up">
							<view class="card-head-message-up-right">
								<view class="right-username">{{ item.username }}</view>
								<!-- 性别展示 -->
								<view class="right-sex" :class="item.sex === 0 ? 'female' : 'male'">
									<up-icon 
										:name="item.sex === 0 ? 'woman' : 'man'" 
										size="20rpx" 
										style="margin-right: 4rpx;"
									></up-icon>
									{{ item.sex === 0 ? '女' : '男' }}
								</view>
								<!-- 认证状态展示 -->
								<view class="right-auth" :class="item.isAuth === 1 ? 'authorized' : 'unauthorized'">
									<up-icon 
										:name="item.isAuth === 1 ? 'checkmark-circle' : 'close-circle'" 
										size="20rpx" 
										style="margin-right: 4rpx;"
									></up-icon>
									{{ item.isAuth === 1 ? '已实名' : '未实名' }}
								</view>
							</view>
							<view class="card-head-message-up-left">
								<view class="left-order-status" :class="getStatusClass(item.state)">
									<up-icon 
										:name="getStatusIcon(item.state)" 
										size="20rpx" 
										style="margin-right: 4rpx;"
									></up-icon>
									{{ getStatusText(item.state) }}
								</view>
							</view>
						</view>
						
						<!-- 下部：年级+时间 -->
						<view class="card-head-message-down">
							<view class="right-grade">{{ item.grade }}</view>
							<view class="split">·</view>
							<view class="left-createTime">{{ formatTime(item.createTime) }}</view>
						</view>
					</view>
				</view>
			</template>
			
			<!-- 卡片主体 -->
			<template #body>
				<view class="card-body">
					<!-- 标签与赏金区 -->
					<view class="card-body-up">
						<view class="card-body-up-right">
							<view class="tag" :class="getTagClass(item.typeId)">{{ getTagText(item.typeId) }}</view>
						</view>
						<view class="card-body-up-left">
							<text class="bounty-text">赏金：</text>
							<text class="bounty-amount">{{ item.price }}元</text>
						</view>
					</view>
					
					<!-- 任务内容区 -->
					<view class="card-body-down">
						<view class="task-label">任务要求：</view>
						<view class="task-content">
							<!-- 内容超出省略处理 -->
							<text :class="{ 'content-expand': item.runDescribe.length > 50 }">
								{{ item.runDescribe.length > 50 ? item.runDescribe.slice(0, 50) + '...' : item.runDescribe }}
							</text>
							<text v-if="item.runDescribe.length > 50" class="view-more">查看更多</text>
						</view>
					</view>
				</view>
			</template>
			
			<!-- 卡片底部 -->
			<template #foot>
				<view class="card-foot">
					<!-- 统计信息 -->
					<view class="stats">
						<view class="stat-item">
							<up-icon name="eye" size="24rpx" color="#888"></up-icon>
							<text class="stat-text">{{ item.views }}</text>
						</view>
						<view class="stat-item">
							<up-icon name="heart" size="24rpx" color="#888"></up-icon>
							<text class="stat-text">{{ item.likes }}</text>
						</view>
						<!-- 新增位置信息 -->
						<view class="stat-item" v-if="item.location">
							<up-icon name="map-marker" size="24rpx" color="#888"></up-icon>
							<text class="stat-text">{{ item.location }}</text>
						</view>
					</view>
					
					<!-- 操作按钮 -->
					<up-button 
						class="contact-btn" 
						size="mini" 
						type="primary"
						shape="round"
						:hover-class="button-hover"
						:disabled="isButtonDisabled(item.state)"
						@click="handleContact(item)"
					>
						<up-icon name="message" size="24rpx"></up-icon>
						联系TA
					</up-button>
				</view>
			</template>
		</up-card>
	</view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getRunList } from "../../apis/runAPI";

// 获取父组件的值
const props = defineProps({
	cards: Array
})
const handleContact = (item: any) => {
  // 跳转到聊天页面，携带userId参数（值为item的sellerId）
  console.log("item",item)
  uni.navigateTo({
    url: `/pages/message/chat?userId=${item.userId}`
  });
};

// 订单状态文本映射
const getStatusText = (state: number) => {
	const statusMap = {
		0: '待接单',
		1: '已接单',
		2: '已完成',
		3: '已结算',
		4: '已取消',
		5: '已过期'
	};
	return statusMap[state] || '未知状态';
}

// 订单状态图标映射
const getStatusIcon = (state: number) => {
	const iconMap = {
		0: 'clock',       // 待接单-时钟
		1: 'order',   // 已接单-剪贴板
		2: 'checkbox-mark',   // 已完成-对勾
		3: 'cash',        // 已结算-现金
		4: 'close',       // 已取消-关闭
		5: ''     // 已过期-超时
	};
	return iconMap[state] || 'help';
}

// 订单状态样式映射
const getStatusClass = (state: number) => {
	const classMap = {
		0: 'status-pending',    // 待接单
		1: 'status-accepted',   // 已接单
		2: 'status-completed',  // 已完成
		3: 'status-settled',    // 已结算
		4: 'status-canceled',   // 已取消
		5: 'status-expired'     // 已过期
	};
	return classMap[state] || '';
}

// 标签类型文本映射
const getTagText = (typeId: number) => {
	const tagMap = {
		0: '求帮忙',
		1: '取快递'
	};
	return tagMap[typeId] || '未知类型';
}

// 标签类型样式映射
const getTagClass = (typeId: number) => {
	return typeId === 0 ? 'tag-help' : 'tag-express';
}

// 格式化时间显示
const formatTime = (time: string) => {
	// 简单示例：实际项目中可根据需要实现更复杂的时间格式化
	const date = new Date(time);
	return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
}

// 判断按钮是否禁用
const isButtonDisabled = (state: number) => {
	// 已完成、已结算、已取消、已过期状态禁用按钮
	return [2, 3, 4, 5].includes(state);
}

const handlerBody = (item:any)=>{
	 const itemJson = encodeURIComponent(JSON.stringify(item));
	uni.navigateTo({
	    url: `/pages/runMessage/runMessage?item=${itemJson}`
	  });
}
</script>

<style lang="scss" scoped>
.card-wrapper {
	padding: 20rpx;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24rpx;
}

.task-card {
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background-color: #fff;
	position: relative;
	
	&:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}
}

/* 头部样式 */
.card-head {
	display: flex;
	align-items: center;
	padding: 24rpx;
}

.card-head-avatar {
	margin-right: 16rpx;
	position: relative;
	
	// 在线状态指示器（示例）
	&::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: 0;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #52c41a;
		border: 3rpx solid #fff;
	}
}

.card-head-message {
	flex: 1;
}

.card-head-message-up {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.card-head-message-up-right {
	display: flex;
	align-items: center;
	gap: 12rpx;
	flex-wrap: wrap;
}

.right-username {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	position: relative;
	
	// 用户名装饰
	&::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -4rpx;
		width: 100%;
		height: 3rpx;
		background-color: currentColor;
		opacity: 0;
		transition: opacity 0.2s;
	}
	
	.task-card:hover &::after {
		opacity: 0.2;
	}
}

// 性别样式
.right-sex {
	font-size: 24rpx;
	padding: 2rpx 10rpx;
	border-radius: 14rpx;
	display: flex;
	align-items: center;
	transition: all 0.2s;
}

.female {
	background-color: #ffe6f2;
	color: #f5222d;
}

.male {
	background-color: #e6f7ff;
	color: #1890ff;
}

// 认证状态样式
.right-auth {
	font-size: 24rpx;
	padding: 2rpx 10rpx;
	border-radius: 14rpx;
	display: flex;
	align-items: center;
	transition: all 0.2s;
}

.authorized {
	background-color: #f6ffed;
	color: #52c41a;
}

.unauthorized {
	background-color: #fff1f0;
	color: #fa541c;
}

.left-order-status {
	font-size: 26rpx;
	font-weight: 500;
	padding: 6rpx 18rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	transition: all 0.2s;
}

// 不同状态的样式
.status-pending {
	background-color: #e6f7ff;
	color: #1890ff;
}

.status-accepted {
	background-color: #fff7e6;
	color: #fa8c16;
}

.status-completed {
	background-color: #f6ffed;
	color: #52c41a;
}

.status-settled {
	background-color: #edf2ff;
	color: #2f54eb;
}

.status-canceled {
	background-color: #f5f5f5;
	color: #8c8c8c;
}

.status-expired {
	background-color: #fafafa;
	color: #bfbfbf;
}

.card-head-message-down {
	display: flex;
	align-items: center;
	gap: 10rpx;
	color: #888;
	font-size: 24rpx;
}

.split {
	opacity: 0.6;
}

/* 主体样式 */
.card-body {
	padding: 0 24rpx 24rpx;
}

.card-body-up {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 16rpx;
	border-bottom: 1px dashed #f0f0f0;
}

.tag {
	font-size: 26rpx;
	padding: 6rpx 16rpx;
	border-radius: 6rpx;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	
	&::before {
		content: '';
		position: absolute;
		left: -100%;
		top: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		transition: left 0.5s;
	}
	
	.task-card:hover &::before {
		left: 100%;
	}
	
	&:hover {
		transform: scale(1.05);
	}
}

// 求帮忙标签
.tag-help {
	background-color: #fff1f0;
	color: #ff4d4f;
}

// 取快递标签
.tag-express {
	background-color: #e6f7ff;
	color: #1890ff;
}

.bounty-text {
	font-size: 26rpx;
	color: #666;
}

.bounty-amount {
	font-size: 28rpx;
	color: #ff4d4f;
	font-weight: 600;
	text-shadow: 0 1rpx 2rpx rgba(255,77,79,0.2);
}

.card-body-down {
	font-size: 26rpx;
	line-height: 1.7;
	color: #555;
}

.task-label {
	color: #333;
	font-weight: 500;
	margin-bottom: 10rpx;
	display: inline-block;
}

.task-content {
	text-align: justify;
	word-break: break-all;
	padding: 16rpx;
	background-color: #fafafa;
	border-radius: 8rpx;
	transition: background-color 0.2s;
	position: relative;
	
	.task-card:hover & {
		background-color: #f5f5f5;
	}
}

.content-expand {
	position: relative;
	padding-right: 80rpx;
}

.view-more {
	position: absolute;
	right: 16rpx;
	bottom: 16rpx;
	color: #1890ff;
	font-size: 24rpx;
	cursor: pointer;
	padding-left: 20rpx;
	background-color: #f5f5f5;
}

/* 底部样式 */
.card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18rpx 24rpx;
	background-color: #fafafa;
	border-top: 1px solid #f0f0f0;
}

.stats {
	display: flex;
	align-items: center;
	gap: 28rpx;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	color: #888;
	font-size: 24rpx;
	transition: all 0.2s;
	
	.task-card:hover & {
		color: #666;
		
		up-icon {
			color: #1890ff !important;
		}
	}
}

.contact-btn {
	height: 56rpx;
	line-height: 56rpx;
	font-size: 26rpx;
	padding: 0 28rpx;
	border-radius: 28rpx;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6rpx;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
		transition: left 0.5s;
	}
	
	&:hover::before {
		left: 100%;
	}
	
	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
		transform: none !important;
	}
}

.button-hover {
	transform: scale(0.96);
}

// 特殊状态卡片效果
.status-canceled, .status-expired {
	.task-card {
		opacity: 0.85;
		filter: saturate(0.8);
	}
	
	.task-content, .bounty-amount {
		text-decoration: line-through;
	}
}
</style>